// eslint-disable-next-line no-use-before-define
import React from "react";
import { collapseToEnd } from "@/assets/js/common";
import "./index.less";

const TextArea = ({ placeholder, value, hide, option, maxLength, onChange }: any) => {
  let edit: any = React.createRef();

  return (
    <div className="msg-textarea-box">
      <div className={`insert-btn ${hide ? "none" : ""}`}>
        <span
          className="clickable no-select"
          onClick={() => {
            let span: HTMLSpanElement = document.createElement("span");
            span.innerText = "用户昵称";
            span.setAttribute("class", "nickname");
            edit.appendChild(span);
            edit.innerHTML += "&#8203";
            value += "用户昵称";
            collapseToEnd(edit);
            onChange(value);
          }}>
          [插入客户昵称]
        </span>
      </div>

      <div className="textarea-box normal-height">
        {/* <div className={`textarea disabled ${hide ? "none" : ""}`}></div> */}
        <div
          ref={(e: any) => {
            edit = e;
          }}
          contentEditable
          suppressContentEditableWarning
          className={`textarea ${value ? "" : "placeholder"}`}
          data-placeholder={placeholder}
          onKeyUp={(e: any) => {
            let innerText = e.target.innerText;
            if (innerText.length > maxLength) {
              innerText = innerText.slice(0, maxLength);
              e.target.innerText = innerText;
              collapseToEnd(e.target);
            }
            onChange(innerText);
          }}></div>
        <div className={`textarea-foot ${option}`}>
          {/* <i className="emotion clickable  hide">
            <span className="icon-wrap ">
              <i className="anticon icon "></i>
            </span>
          </i> */}
          <p className="text-cnt">
            {value.length}/{maxLength}
          </p>
        </div>
      </div>
    </div>
  );
};

export default TextArea;
